{% extends 'ApplicationBootstrapBundle::layout.html.twig' %}

{% block title %}Sticky Footer and Fixed Top Navbar Example for Bootstrap{% endblock %}

{% block layoutstyle %}
    <link href="{{ asset('bundles/applicationbootstrap/css/examples/navbar_fixed_sticky_footer.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block stylesheets %}
    <link href="{{ asset('bundles/applicationbootstrap/css/file-upload/jquery-bootstrap/jquery.fileupload.css') }}" rel="stylesheet" type="text/css" media="all" />
{% endblock %}

{% block javascripts %}
    <!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/vendor/jquery.ui.widget.js') }}" type="text/javascript"></script>
    
    <!-- The Load Image plugin is included for the preview images and image resizing functionality -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/load-image.all.min.js') }}" type="text/javascript"></script>
    <!-- The Canvas to Blob plugin is included for image resizing functionality -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/canvas-to-blob.min.js') }}" type="text/javascript"></script>
    
    <!-- The Iframe Transport is required for browsers without support for XHR file uploads -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.iframe-transport.js') }}" type="text/javascript"></script>
    <!-- The basic File Upload plugin -->
    <script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload.js') }}" type="text/javascript"></script>

	<!-- The File Upload processing plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-process.js') }}" type="text/javascript"></script>
	<!-- The File Upload image preview & resize plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-image.js') }}" type="text/javascript"></script>
	<!-- The File Upload audio preview plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-audio.js') }}" type="text/javascript"></script>
	<!-- The File Upload video preview plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-video.js') }}" type="text/javascript"></script>
	<!-- The File Upload validation plugin -->
	<script src="{{ asset('bundles/applicationbootstrap/js/file-upload/jquery-bootstrap/jquery.fileupload-validate.js') }}" type="text/javascript"></script>
	
    <script type="text/javascript">
    
    $(function () {
        'use strict';
        // Change this to the location of your server-side upload handler:
        var url = "{{ asset('bundles/applicationbootstrap/uploads/jquery-bootstrap/images/index.php') }}";
        
        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('<a/>')
                      .attr('target', '_blank')
                      .prop('href', file.url)
                      .text(file.name)
                      .append('<br/>')
                      .appendTo('#files');
                });
            },
            progressall: function (e, data) {
                var progress = parseInt(data.loaded / data.total * 100, 10);
                $('#progress .progress-bar').css(
                    'width',
                    progress + '%'
                );
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    });
    
    /******/
	$(function () {
	    'use strict';
	    // Change this to the location of your server-side upload handler:
	    var url = "{{ asset('bundles/applicationbootstrap/uploads/jquery-bootstrap/images/index.php') }}",
	        uploadButton = $('<button/>')
	            .addClass('btn btn-primary')
	            .prop('disabled', true)
	            .text('Processing...')
	            .on('click', function () {
	                var $this = $(this),
	                    data = $this.data();
	                $this
	                    .off('click')
	                    .text('Abort')
	                    .on('click', function () {
	                        $this.remove();
	                        data.abort();
	                    });
	                data.submit().always(function () {
	                    $this.remove();
	                });
	            });
	    $('#fileupload').fileupload({
	        url: url,
	        dataType: 'json',
	        autoUpload: false,
	        acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
	        maxFileSize: 5000000, // 5 MB
	        // Enable image resizing, except for Android and Opera,
	        // which actually support image resizing, but fail to
	        // send Blob objects via XHR requests:
	        disableImageResize: /Android(?!.*Chrome)|Opera/
	            .test(window.navigator.userAgent),
	        previewMaxWidth: 100,
	        previewMaxHeight: 100,
	        previewCrop: true
	    }).on('fileuploadadd', function (e, data) {
	        data.context = $('<div/>').appendTo('#files');
	        $.each(data.files, function (index, file) {
	            var node = $('<p/>')
	                    .append($('<span/>').text(file.name));
	            if (!index) {
	                node
	                    .append('<br>')
	                    .append(uploadButton.clone(true).data(data));
	            }
	            node.appendTo(data.context);
	        });
	    }).on('fileuploadprocessalways', function (e, data) {
	        var index = data.index,
	            file = data.files[index],
	            node = $(data.context.children()[index]);
	        if (file.preview) {
	            node
	                .prepend('<br>')
	                .prepend(file.preview);
	        }
	        if (file.error) {
	            node
	                .append('<br>')
	                .append($('<span class="text-danger"/>').text(file.error));
	        }
	        if (index + 1 === data.files.length) {
	            data.context.find('button')
	                .text('Upload')
	                .prop('disabled', !!data.files.error);
	        }
	    }).on('fileuploadprogressall', function (e, data) {
	        var progress = parseInt(data.loaded / data.total * 100, 10);
	        $('#progress .progress-bar').css(
	            'width',
	            progress + '%'
	        );
	    }).on('fileuploaddone', function (e, data) {
	        $.each(data.result.files, function (index, file) {
	            if (file.url) {
	                var link = $('<a>')
	                    .attr('target', '_blank')
	                    .prop('href', file.url);
	                $(data.context.children()[index])
	                    .wrap(link);
	            } else if (file.error) {
	                var error = $('<span class="text-danger"/>').text(file.error);
	                $(data.context.children()[index])
	                    .append('<br>')
	                    .append(error);
	            }
	        });
	    }).on('fileuploadfail', function (e, data) {
	        $.each(data.files, function (index) {
	            var error = $('<span class="text-danger"/>').text('File upload failed.');
	            $(data.context.children()[index])
	                .append('<br>')
	                .append(error);
	        });
	    }).prop('disabled', !$.support.fileInput)
	        .parent().addClass($.support.fileInput ? undefined : 'disabled');
	});
    
    
    </script>

{% endblock %}

{% block navigation %}
    <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
        
            {% include 'ApplicationBootstrapBundle::_navbar.html.twig' %}
        
        </div>
    </nav>
{% endblock %}

{% block body %}
    <div class="container">
        <div class="page-header">
          <h1>jQuery File Upload</h1>
        </div>
        <h2 class="lead">Basic Plus version</h2>
        
        {% include 'ApplicationBootstrapBundle:FileUpload:_navTabsjQueryUiBootstrop.html.twig' %}
        <br/>
	    <blockquote>
	        <p>File Upload widget with multiple file selection, drag&amp;drop support, progress bar, validation and preview images, audio and video for jQuery.<br>
	        Supports cross-domain, chunked and resumable file uploads and client-side image resizing.<br>
	        Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.</p>
	    </blockquote>
        
        <div class="row">
            <div class="col-md-12">
              
			    <!-- The fileinput-button span is used to style the file input field as button -->
			    <span class="btn btn-success fileinput-button">
			        <i class="glyphicon glyphicon-plus"></i>
			        <span>Add files...</span>
			        <!-- The file input field used as target for the file upload widget -->
			        <input id="fileupload" type="file" name="files[]" multiple>
			    </span>
			    <br/>
			    <br/>
			    <!-- The global progress bar -->
			    <div id="progress" class="progress">
			        <div class="progress-bar progress-bar-success"></div>
			    </div>
			    <!-- The container for the uploaded files -->
			    <div id="files" class="files"></div>
			    
				<hr/>	    
			    <div class="panel panel-default">
			        <div class="panel-heading">
			            <h3 class="panel-title">Demo Notes</h3>
			        </div>
			        <div class="panel-body">
			            <ul>
			                <li>The maximum file size for uploads in this demo is <strong>5 MB</strong> (default file size is unlimited).</li>
			                <li>Only image files (<strong>JPG, GIF, PNG</strong>) are allowed in this demo (by default there is no file type restriction).</li>
			                <li>Uploaded files will be deleted automatically after <strong>5 minutes</strong> (demo setting).</li>
			                <li>You can <strong>drag &amp; drop</strong> files from your desktop on this webpage (see <a href="https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support">Browser support</a>).</li>
			                <li>Please refer to the <a href="https://github.com/blueimp/jQuery-File-Upload">project website</a> and <a href="https://github.com/blueimp/jQuery-File-Upload/wiki">documentation</a> for more information.</li>
			                <li>Built with the <a href="http://getbootstrap.com/">Bootstrap</a> CSS framework and Icons from <a href="http://glyphicons.com/">Glyphicons</a>.</li>
			            </ul>
			        </div>
			    </div>
              
            </div>
        </div>
    </div> <!-- /container -->
{% endblock %}